<template>
	<div class="detail-standard">
		<nav-header>
			<li>
			<router-link to="/teaching/research/evaluation-criteria">评估标准设置</router-link>
			<li>
			<li class="gap">&gt;</li><li>查看评估标准</li> 
		</nav-header>
		<div class="standard-box">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标准名称" prop="name">
					<el-input v-model="ruleForm.name"  disabled placeholder="最多可输入20个字"></el-input>
				</el-form-item>
				<el-form-item label="标准总分" prop="total_score">
					<el-input v-model="ruleForm.total_score"  disabled ></el-input>
				</el-form-item>
				<el-form-item label="适用" :prop="$store.state.checkLevel ? 'classify_id' : 'subject_id'">
					<el-select v-model="ruleForm[$store.state.checkLevel ? 'classify_id' : 'subject_id']" filterable disabled placeholder="请选择分类">
						<el-option
					      v-for="item in orgSubjectKind"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
				</el-form-item>
				<div class="total-score">
					<h4>标准总分</h4>
					<div class="score-l1" v-for="(item, index) in ruleForm.item_data" :key="index">
						<el-form-item  label-width="0" prop="entryName" >
							<el-col :span="15">
								<el-form-item prop="" label="评分标准">
									<el-input v-model="item.name" maxlength=10 disabled  placeholder="你最多可以输入10个字"></el-input>
								</el-form-item>
							</el-col>
							
						
						</el-form-item>
						<div class="score-l2" >
							<el-form-item label-width="0"  v-for="(item2, index2) in item.children" :key="index2">
								<el-col :span="15">
									<el-form-item prop="date1" label="评分项">
										<el-input 
										v-model="item2.name"
										type="textarea"
										:rows="4" resize="none"
										maxlength=200
										max=100
										disabled
										placeholder="你最多可以输入200个字"></el-input>
										
									</el-form-item>
									
								</el-col>
								<el-col :span="7">
									<el-form-item prop="date2" label="分数">
										<el-input v-model="item2.score"  disabled type="number" placeholder="分数"></el-input>
									</el-form-item>
								</el-col>
								
							</el-form-item>
							
						</div>
					</div>
					
				</div>
				
			</el-form>
		</div>
	</div>
</template>

<script>
	
	export default{
		data(){
			return {
				orgSubjectKind:[],
				ruleForm: {
					id:0,
					name: '',
					total_score: 0,
					classify_id: '',
					subject_id: '',
					item_data: [
						{
							name: '',
							score: 0 ,
							children: [
								{ name: '', score: 0, id: 0 }
							]
						},
					]
				},
				rules: {
					name: [
            { validator: this.checkSpace, required: true },
            { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
          ],
					classify_id: [
                { required: true, message: "请选择分类", trigger: "change" }
            ],
          subject_id: [
                { required: true, message: "请选择分类", trigger: "change" }
            ]
				},
			}
		},
		created(){
			if( !is_empty( this.$route.params.id ) && parseInt(this.$route.params.id) > 0 ){
				this.ruleForm.id = this.$route.params.id;
				this.getInfo();
			}
			this.getSubject();
		},
		methods: {
			getInfo(){
				let success = ( data=>{
					this.ruleForm.name = data.data.name;
					this.ruleForm.total_score = data.data.total_score;
					this.ruleForm.classify_id = data.data.classify_id;
					this.ruleForm.subject_id = data.data.subject_id;
					
					if( !is_empty( data.data.standard_item ) && data.data.standard_item.length > 0 ){
						this.ruleForm.item_data = [];
						for( var i = 0 ; i < data.data.standard_item.length ; i++ ){
							var item_data = {children:[]};
							item_data.id = data.data.standard_item[i].id;
							item_data.name = data.data.standard_item[i].name;
							item_data.pid = data.data.standard_item[i].pid;
							item_data.score = data.data.standard_item[i].score;
							if( !is_empty( data.data.standard_item[i].child ) && data.data.standard_item[i].child.length > 0 ){
								for( var j = 0 ; j < data.data.standard_item[i].child.length ;j++ ){
									item_data.children.push({
										id:data.data.standard_item[i].child[j].id,
										name:data.data.standard_item[i].child[j].name,
										pid:data.data.standard_item[i].child[j].pid,
										score:data.data.standard_item[i].child[j].score,
									})
								}
							}else{
								item_data.children = [];
							}
							this.ruleForm.item_data.push( item_data );
						}
					}
            		
            	})
            	this.$ajax.get('api/network/standard_detail',{params: {id:this.ruleForm.id},func:{success:success}})
			},
			
			
			//获取科目
			getSubject(){
				let success = ( data=>{
					this.orgSubjectKind = data.data;
				})
				if(!this.$store.state.checkLevel) {
						this.$ajax.get("api/cate/subject", {params: this.subjectParam,func: { success: success }});
				}else{
					this.$ajax.get('api/network/eva_standard_classify',{func:{success:success}})
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.detail-standard{
		.standard-box{
			margin-top: 30px;
			max-width: 800px;
		}
		.el-input.is-disabled .el-input__inner  {
			background-color: #ffffff;
		    border-color: #e4e7ed;
		    color: #000308;
		    cursor: not-allowed;
		}
		
		.score-l1{
			margin-bottom: 20px;
			background: #ffffff;
			padding: 20px;
			.line{
				text-align: right;
				font-size: 18px;
			}
			>.el-form-item{
				margin-bottom: 0;
			}
			.nubxx {
			    position: absolute;
			   bottom: 10px;
			   left: 410px;
			    font-size: 12px;
			    color: #999;
			    i {
			        color: #333;
			    }
			}
		}
		.score-l2{
			>.el-form-item{
				margin-bottom: 0;
			}
		}

		.score-btn{
			.el-icon-plus{
				padding: 10px;
				background: #DEEFFF;
				border-radius: 3px;
				color: #A0C1E1;
				cursor: pointer;
				-webkit-transition: .3s;
				transition: .3s;
				margin-right: 10px;
				&:hover{
					color: #fff;
					  background-color: #409EFF;
				}
			}
		}

		.score-lx{
			padding-left: 20px;
			margin-bottom: 40px;
		}
		.el-textarea.is-disabled .el-textarea__inner{
			background-color: #ffffff;
		    border-color: #e4e7ed;
		    color: #000000;
		    cursor: not-allowed;
			background-color: #ffffff;
		    border-color: #e4e7ed;
		    cursor: not-allowed;
		}
	}
</style>